﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<title>Slide in Different Directions</title>
<style type="text/css"> 
#examples {
  float: left;
  width: 375px;
}
#code {
  float: left;
  width: 560px;
}
#code pre {
  width: 560px;
  overflow: auto;
}
.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 338px;
  height: 36px;
  padding: 6px;
  background-color: #4c5;
  color: #333;
}
 
.slide button {
  margin: .7em 0 0 .7em;
}
.js #slidebottom .inner { 
  display: none;
}
</style>    
<script type="text/javascript">
    document.documentElement.className = 'js';
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#slidebottom button').click(function () {
            $(this).next().slideToggle();
        });

        $('#slidewidth button').click(function () {
            $(this).next().animate({ width: 'toggle' });
        });

        $('#slideleft button').click(function () {
            var $lefty = $(this).next();
            $lefty.animate({
                left: parseInt($lefty.css('left'), 10) == 0 ?
      -$lefty.outerWidth() :
      0
            });
        });

        $('#slidemarginleft button').click(function () {
            var $marginLefty = $(this).next();
            $marginLefty.animate({
                marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ?
      $marginLefty.outerWidth() :
      0
            });
        });

        $('#slidewidthsome button').click(function () {
            var $some = $(this).next(),
    someWidth = $some.outerWidth(),
    parentWidth = $some.parent().width();
            $some.animate({
                width: someWidth === parentWidth ?
      someWidth / 2 :
      parentWidth - (parseInt($some.css('paddingLeft'), 10) + parseInt($some.css('paddingRight'), 10))
            });
        });

    });
 
</script>
</head>
 
<body>
<div id="examples">
  
  <div id="slidebottom" class="slide">
    <button>slide it</button>
    <div class="inner">Slide from bottom</div>
  </div>
 
  <div id="slidewidth" class="slide">
    <button>slide it</button>
    <div class="inner">Animate this element's width</div>
  </div>  
  <div id="slideleft" class="slide">
    <button>slide it</button>
    <div class="inner">Animate this element's left style property</div>
  </div>
  <div id="slidemarginleft" class="slide">
    <button>slide it</button>
    <div class="inner">Animate this element's margin-left style property</div>
  </div>
  <div id="slidewidthsome" class="slide">
    <button>slide it</button>
    <div class="inner">Animate this element's width</div>
  </div>
</div>  
 
<div id="code">
<p>CSS</p>
<pre>
.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 338px;
  height: 36px;
  padding: 6px;
  background-color: #4c5;
  color: #333;
}
 
.slide button {
  margin: .7em 0 0 .7em;
}
.js #slidebottom .inner { 
  display: none;
}
</pre>
<p>jQuery (after including the core jquery.js file)</p>
<pre>
$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });
 
  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
 
 
  $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
      -$lefty.outerWidth() :
      0
    });
  });
 
  $('#slidemarginleft button').click(function() {
    var $marginLefty = $(this).next();
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
      $marginLefty.outerWidth() :
      0
    });
  });  
 
  $('#slidewidthsome button').click(function() {
    var $some = $(this).next(),
    someWidth = $some.outerWidth(),
    parentWidth = $some.parent().width();
    $some.animate({
      width: someWidth === parentWidth ? 
      someWidth/2 : 
      parentWidth - (parseInt($some.css('paddingLeft'),10) + parseInt($some.css('paddingRight'),10))});
  });
 
});  
</pre>
</div>
 
</body>
</html>

